/**
 * 请选择乘车人
 * @email 626097912@qq.com
 * Created by dength on 2017/04/13
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import { getNavigator } from '../route/route';
import CheckBox from 'react-native-check-box';
import Icon from 'react-native-vector-icons/Ionicons';
import Buttom from '../common/Buttom';

var data = [{ checked: true }];

class SelectUser extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            isAdopt: false,
        }
    }

    getNavigationBarProps() {
        return {
            title: '请选择乘车人',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    onClick(data) {
        data.checked = !data.checked;
    }

    _onPress(navname) {
        getNavigator().push({ name: navname });
    }

    renderBody() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => this._onPress('AddUser')}
                    activeOpacity={0.8}
                    style={styles.binding}>
                    <View style={styles.binding_box}>
                        <View style={{ justifyContent: 'center' }}>
                            <Text style={{ fontSize: 12, color: '#FF900A' }}>添加乘车人</Text>
                        </View>
                        <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                    </View>
                </TouchableOpacity>
                <View style={{ marginTop: 10 }}>

                    <View style={styles.binding}>
                        <View style={styles.binding_box}>
                            <View style={styles.binding_box_lf}>
                                <View style={{ width: 30, justifyContent: 'center' }}>
                                    <CheckBox
                                        onClick={() => this.onClick(data)}
                                        isChecked={data.checked}
                                        checkedImage={<Image source={require('../images/ic_radio.png')} style={styles.radio_img} />}
                                        unCheckedImage={<Image source={require('../images/ic_unradio.png')} style={styles.radio_img} />}
                                        />
                                </View>
                                <View >
                                    <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#37363A' }}>姓名</Text>
                                    <Text style={{ fontSize: 12, color: '#ACB5BD' }}>身份证:<Text>430215****5468</Text></Text>
                                </View>
                            </View>
                            <View style={styles.binding_box_rg}>
                                <View style={{ justifyContent: 'center', width: 70 }}>
                                    {
                                        this.state.isAdopt === true ?
                                            <Text style={{ fontSize: 12, color: '#74C10D' }}>已通过</Text>
                                            :
                                            <Text style={{ fontSize: 12, color: '#3C3B40' }}>未通过</Text>
                                    }

                                </View>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={{ justifyContent: 'center', alignItems: 'flex-end', width: 30 }}>
                                    <Image source={require('../images/ic_selectUser.png')} style={styles.radio_img} />
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                    <View style={styles.binding}>
                        <View style={styles.binding_box}>
                            <View style={styles.binding_box_lf}>
                                <View style={{ width: 30, justifyContent: 'center' }}>
                                    <CheckBox
                                        onClick={() => this.onClick(data)}
                                        isChecked={data.checked}
                                        checkedImage={<Image source={require('../images/ic_radio.png')} style={styles.radio_img} />}
                                        unCheckedImage={<Image source={require('../images/ic_unradio.png')} style={styles.radio_img} />}
                                        />
                                </View>
                                <View >
                                    <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#37363A' }}>姓名</Text>
                                    <Text style={{ fontSize: 12, color: '#ACB5BD' }}>身份证:<Text>430215****5468</Text></Text>
                                </View>
                            </View>
                            <View style={styles.binding_box_rg}>
                                <View style={{ justifyContent: 'center', width: 70 }}>
                                    <Text style={{ fontSize: 12, color: '#74C10D' }}>已通过</Text>
                                </View>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={{ justifyContent: 'center', alignItems: 'flex-end', width: 30 }}>
                                    <Image source={require('../images/ic_selectUser.png')} style={styles.radio_img} />
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>

                </View>

                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.clause}
                    >
                    <Text style={styles.clause_text}>身份核验申明</Text>
                    <Icon name="ios-arrow-dropright" size={12} color="#BEC6CD" />
                </TouchableOpacity>

                <View style={styles.binding_buttom}>
                    <Buttom
                        onPress={() => this._onPress('AdvanceBooking')}
                        containerStyle={styles.buttom_box}
                        style={{ fontSize: 18, color: 'white' }}
                        text={'立即预订'}
                        />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    binding: {
        width: Constants.window.width, paddingTop: 10, paddingBottom: 10,
        backgroundColor: 'white', height: 55, justifyContent: 'center', marginBottom: 1
    },
    binding_box: {
        marginLeft: 15, marginRight: 15, flexDirection: 'row', justifyContent: 'space-between',
    },
    tabBarSelectedIcon: {
        width: 22, height: 22
    },
    binding_box_lf: {
        width: (Constants.window.width - 30) - 100, flexDirection: 'row',
    },
    binding_box_rg: {
        width: 100, flexDirection: 'row',
    },
    clause: {
        justifyContent: 'center', alignItems: 'center', marginTop: 10, flexDirection: 'row'
    },
    clause_text: {
        color: '#FF8B00', fontSize: 10, paddingRight: 5
    },
    radio_img: {
        width: 18, height: 18
    },
    //按钮样式
    binding_buttom: {
        width: Constants.window.width, marginLeft: 30, marginRight: 30, position: 'absolute', bottom: 10
    },
    buttom_box: {
        height: 47, backgroundColor: '#FF8B00', alignItems: 'center', justifyContent: 'center', width: Constants.window.width - 60, borderRadius: 10
    },
});

export default SelectUser;